<template>
   <div class="itemProcess">
       <div class="item-title">{{title}}
       </div>
       <div class="ul" v-show="title!='选择审批人'">
          <div class="li" v-for="(item,index) in personList" :key="index">
            <div class="left">
              <img :src="item.photo?item.photo:header" class="img" />
              <div class="name">{{item.username}}</div>
              <van-icon v-show="isChoose==1" name="cross" color="#ccc" size="10px" class="closed" @click="delItem(index)"/>
            </div>
            <div class="right" :class="{none:index==personList.length-1}">
              <van-icon name="arrow" color="#ccc" size="25px"/>
            </div>
          </div>
          <!-- ||title!='抄送人' -->
          <div class="li" v-show="isChoose==1">
            <div class="left">
              <div class="img add" @click="addPerson(selectedIds)">
                  <van-icon name="plus" color="#ccc" size="25px"/>
              </div>
            </div>
          </div>
       </div>
       <div class="ul" v-show="title=='选择审批人'">
          <div class="li" v-for="(item,index) in personList" :key="index">
            <div class="left">
              <img :src="item.photo?item.photo:header" class="img" />
              <div class="name">{{item.username}}</div>
              <van-icon v-show="isChoose==1" name="cross" color="#ccc" size="10px" class="closed" @click="delItem(index)"/>
            </div>
            <div class="right" :class="{none:index==personList.length-1}">
              <van-icon name="arrow" color="#ccc" size="25px"/>
            </div>
          </div>
          <!-- ||title!='抄送人' -->
          <div class="li" v-show="isChoose==1">
            <div class="left">
              <div class="img add" @click="addPerson(selectedIds)">
                  <van-icon name="plus" color="#ccc" size="25px"/>
              </div>
            </div>
          </div>
       </div>
   </div>
</template>
<script>
import axios from 'axios'
export default {
   props: {
    title: {
      type: String,
      default: () => ('选择抄送人'),
    },
    //是否自选0指定1自选
    isChoose: {
      type: Number,
      default: () => (0),
    },
    token: {
      type: String,
      default: () => ('deHWIRDPaYMDAxN7d2/OZop+yq/Qc53GZTo0SSItJld2BAnQDD8iwMEbjZmFcN1N'),
    },
    cid: {
      type: Number,
      default: () => (1182),
    },
    form_id: {
      type: Number,
      default: () => (34),
    },
    chooseIndex: {
      type: Number,
      default: () => (0),
    },
    personList: {
      type: Array,
      default: () => ([])
    },
    // 指定人员id
    selectedIds: {
      type: Array,
      default: () => ([])
    },
  },
  data() {
    return {
      personList1:[],
      changeList:[],
      header:require('../assets/header.png'),
    };
  },
  // watch: {
  //   personList1: {
  //     handler(newName, oldName) {
  //       console.log('bian',newName,oldName)
  //       this.$emit('changeItem',newName,this.chooseIndex)
  //     }
  //   },
    
  //   deep: true,
  //   // immediate: true
    
  // },
  created () {
    // window["addUsers"] = res => {
    //   this.addUsers(res);
    // };
    
    console.log('212',this.isChoose)
    console.log('this.personList',this.personList)
    // console.log('this.personList1',this.personList1)
//     let arg=[
//         {id: 59172,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt"},
//         {id: 59173,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt45"},
//       ]
//       let data=this.personList1.concat(arg)
//        console.log('data',data)
//       this.personList1=Array.from(new Set(data))
//       console.log('this.personList34',this.personList,this.personList1)
  },
  methods: {
    // getProcess(){
    //   axios({
    //     method:'post',
    //     url:'http://test.api.officelinking.com/index.php/app/form/getProcess',
    //     headers:{
    //       'token':this.token
    //     },
    //     data:{
    //       cid:this.cid,
    //       form_id:this.form_id,
    //     },
    //   }).then((response) =>{          //这里使用了ES6的语法
    //       console.log(response)       //请求成功返回的数据
    //       if(response.data.code===0){
    //         this.$toast('获取审批流程数据成功');
    //       }else{
    //         this.$toast(response.data.msg);
    //       }
    //   }).catch((error) =>{
    //       console.log(error)
    //       this.$toast('接口失败');
    //   })
    // },
    // getToContacts(data){
    //   let userAgent = navigator.userAgent;
    //   let isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
    //   let isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    //   if(isAndroid){
    //     if(window.android){
    //       window.android.goToUsers(data);
    //     }else{
    //       this.addUsers([1]);
    //     }
    //   }else if(isIOS){
    //     if(window.webkit.messageHandlers){
    //       window.webkit.messageHandlers.goToUsers.postMessage(data);
    //     }else{
    //       this.addUsers([1]);
    //     }
        
    //   }else{
    //     this.addUsers([1]);
    //   }
    // },
//     addUsers(arg){
//       let da=[
//         {id: 59171,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt"},
//         {id: 59172,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt34"},
//         {id: 59173,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt344"}
//       ]
//       if(this.personList1.length==0){
//         this.personList1=da;
//         console.log('personList14',this.personList1)
//         return
//       }
//       this.personList1.forEach(v=>{
//         da.forEach(m => {
//           if(m.id!=v.id){
//             this.personList1.push(m)
//           }
//         });
//       })
//       console.log('personList134',this.personList1)
//     },
//     addUsers(arg){
//       // console.log('arg1',arg,'12')
//       // if(this.personList1.length==0){
//       //   this.$set(this.personList1)
//       //   this.personList1=[...arg];
//       //   console.log('personList14',this.personList1)
//       //   return
//       // }
//       // let arr=[]
//       // this.personList1.forEach(v=>{
//       //   console.log('v',v)
//       //   arg.forEach(m => {
//       //     if(m.id!=v.id){
//       //       arr.push(m)
//       //     }
//       //   });
//       // })
//       let arr=[]
//       arg.forEach((m,i) => {
//         if(this.personList1.includes(m)==false){
//           // arr.push(m)
//           this.$set(this.personList1,i,m)
//         }
//       });
//       // let data=this.personList1.concat(arr)
//       // this.personList1=[...data]
// //       let a=new Set(arg);
// // let b=new Set(this.personList1);
// // this.personList1 = Array.from(new Set([...b, ...a]));
//       console.log('personList134',this.personList1)
//       this.$forceUpdate();
//       console.log('forceUpdate')
//     },
    addPerson(user_ids){
//       let da=[
//         {id: 59171,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt"},
//         {id: 59172,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt34"},
//         {id: 59173,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt344"}
//       ]
//       if(this.personList1.length==0){
//         this.personList1=da;
//         console.log('personList14',this.personList1)
//         return
//       }
//       this.personList1.forEach(v=>{
//         da.forEach(m => {
//           if(m.id!=v.id){
//             this.personList1.push(m)
//           }
//         });
//       })
//       console.log('personList134',this.personList1)
      let data=JSON.stringify(user_ids)
      console.log('user_ids',data,this.chooseIndex)
      // this.getToContacts(data)
this.$emit('changeItem',data,this.chooseIndex)
      // this.addUsers(data)

//       this.addUsers([
//         {id: 59172,
// photo: "http://ofzl.oss-cn-shenzhen.aliyuncs.com/users/262e10cc15c215e57f239e25190b013f.jpg",
// username: "tt"}
//       ]);
    },
    delItem(index){
      // this.personList.splice(index,1)
      this.$emit('delItem',this.chooseIndex,index)
    },
    // changeList(){
    //   if(this.personList1.length)
    // },
  },
}
</script>
<style lang="scss" scoped>
.itemProcess{
    padding: 0 15px;
    box-sizing:border-box;
    background-color:#fff;
    .item-title{
        text-align:left;
        height:40px;
        line-height:40px;
    }
    .ul{
        display:flex;
        flex-wrap: wrap;
        .li{
            width:25%;
            height:80px;
            display:flex;
            .left{
                flex:1;
                position: relative;
                .img{
                    width:50px;
                    height:50px;
                    border-radius:50%;
                    display:inline-block;
                    &.add{
                      background-color:#f5f5f5;
                      display:flex;
                      justify-content: center;
                      align-items: center;
                    }
                }
                .name{
                  text-align:center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 50px;
                }
                .closed{
                    position: absolute;
                    right:0;
                    top:0;
                    border:1px solid #999;
                    border-radius:50%;
                }
            }
            .right{
               width:30px;
               padding-top:12px;
               &.none{
                 visibility: hidden;
               }
            }
            
        }
    }
}
</style>